<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>${"${articleTitle!}-政府采购信息网"}</title>
    <#if articleInfo?length gt 1>
        <meta name="description" content="${articleInfo}">
    <#else>
        <meta name="description" content="${articleTitle}">
    </#if>
    <meta name="keywords" content="${keywords}">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">
    <link rel="stylesheet/less" href="/web/public/public.less">
    <link rel="stylesheet/less" href="/web/css/article.less">
    <link rel="stylesheet" href="/web/css/audio.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2103922_29dsi13humk.css">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">

    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/lib/jquery.qrcode.min.js"></script>
    <script src="/web/lib/pgwslideshow.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="/web/lib/audio.js"></script>
    <script src="/web/lib/less.min.js"></script>
    <script>
        function closeSimpleView() {
            $('body').removeClass('simple-view');
        }
    </script>
    <script>
        $(function () {
            var timer = setInterval(function () {
                try{
                    if (returnCitySN) {
                        clearInterval(timer);
                        $.ajax({
                            url:ports.articleClickCount,
                            data:{
                                articleId:$('#main-content').data('articleId'),
                                ip:returnCitySN.cip
                            },
                            //设置跨域为true
                            crossDomain:true,
                            // 允许携带证书
                            xhrFields: {
                                withCredentials: true
                            },
                            success:function (res) {}
                        })
                    }
                }catch (err){
                    if(err.toString().search('returnCitySN is not defined')==-1)
                        console.log(err)
                };
            },100);
        })
    </script>
    <script>
        function scollToComment() {
            document.getElementById('fragment-comment').scrollIntoView({behavior: "smooth"});
        }
        function simpleRead() {
            $('body').addClass('simple-view');
        }
        $(function () {
            var articleId = $('#fragment-article-share-menu').data('articleId');
            var $btnCommentLi = $('#fragment-article-share-menu .menu-list>li.comment');
            var $btnCollectionLi = $('#fragment-article-share-menu .menu-list>li.collect');
            var $btnLikeLi = $('#fragment-article-share-menu .menu-list>li.like');
            var isCollect = false;
            var isLike = false;

            $.ajax({
                url:ports.articleLikeNums,
                data:{
                    articleId:articleId
                },
                success:function (res) {
                    console.log('查询文章收藏点赞数量',res);
                    if(res.status==200){
                        $btnCommentLi.find('span').text(res.data.commentCount);
                        $btnCollectionLi.find('span').text(res.data.collectionCount);
                        $btnLikeLi.find('span').text(res.data.likeCount);
                        isCollect = res.data.collection;
                        isLike = res.data.like;

                        if(isCollect){
                            $btnCollectionLi.addClass('active');
                        }
                        if(isLike){
                            $btnLikeLi.addClass('active');
                        }

                        $btnCollectionLi.click(function () {
                            if(!isCollect){
                                $.ajax({
                                    url:ports.articleCollect,
                                    data:{
                                        articleId:articleId
                                    },
                                    success:function (res1) {
                                        console.log('收藏文章',res1);
                                        if(res1.status==200){
                                            $btnCollectionLi.addClass('active');
                                            $btnCollectionLi.find('span').text(res1.data.collectionCount);
                                            isCollect = true;
                                        }
                                    }
                                })
                            }else {
                                $.ajax({
                                    url:ports.cancelArticleCollect,
                                    data:{
                                        articleId:articleId
                                    },
                                    success:function (res1) {
                                        console.log('取消收藏文章',res1);
                                        if(res1.status==200){
                                            $btnCollectionLi.removeClass('active');
                                            $btnCollectionLi.find('span').text(res1.data.collectionCount);
                                            isCollect = false;
                                        }
                                    }
                                })
                            }

                        });
                        $btnLikeLi.click(function () {

                            if(!isLike){
                                $.ajax({
                                    url:ports.articleLike,
                                    data:{
                                        articleId:articleId
                                    },
                                    success:function (res1) {
                                        console.log('点赞文章',res1);
                                        if(res1.status==200){
                                            $btnLikeLi.addClass('active');
                                            $btnLikeLi.find('span').text(res1.data.likeCount);
                                            isLike = true;
                                        }
                                    }
                                })
                            }else {
                                $.ajax({
                                    url:ports.cancelArticleLike,
                                    data:{
                                        articleId:articleId
                                    },
                                    success:function (res1) {
                                        console.log('取消点赞文章',res1);
                                        if(res1.status==200){
                                            $btnLikeLi.removeClass('active');
                                            $btnLikeLi.find('span').text(res1.data.likeCount);
                                            isLike = false;
                                        }
                                    }
                                })
                            }
                        });
                    }
                }
            })
        })

    </script>
    <script>
        //单个数字配零
        function getDouble(number){
            var numbers=["0","1","2","3","4","5","6","7","8","9"];
            for(var i=0;i<numbers.length;i++){
                if(numbers[i]==number){
                    return "0"+numbers[i];
                }else if(i==9){
                    return number;
                }

            }
        }
        //得到当天时间
        function getTodayTime(){
            var days=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            var today=new Date();
            var str= (today.getYear()<1900?1900+today.getYear():today.getYear())+"年" + getDouble([today.getMonth()+1])+"月" +getDouble(today.getDate()) +"日 &nbsp;"+getDouble(today.getHours())+":"+getDouble(today.getMinutes())+":"+getDouble(today.getSeconds());
            document.getElementById('time').innerHTML=str;
        }
        //每隔一秒刷新一次
        setInterval("getTodayTime()",1000);
    </script>

    <style type="text/less">
        @import "/web/public/public.less";
        #main-content{
            h1{
                line-height: 60px;
                font-size: 38px;
                font-weight: bold;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
                text-overflow: ellipsis;
                overflow: hidden;
                margin: 16px 0;
            }

            .source{
                font-size: 14px;
                color: #a8a8a8;
                padding-top: 25px;
            }
            .source .website{
                color: #7f7f7f;
            }
            .source>span+span{
                margin-left: 13px;
            }
            .source+hr{
                border-color: #EEEEEE;
                margin-top: 10px;
            }
            .content-wrap{
                width: 600px;
                padding: 0 5px;
                //min-height: 1000px;
                margin-left: 82px;
                margin-top: 60px;
                .content{
                    line-height: 24px;
                }
                .abstract{
                    width:599px;
                    font-size:16px;
                    font-weight:400;
                    color:#6E6E6E;
                    line-height:30px;
                }
                .hr{
                    width: 170px;
                    height: 6px;
                    background-color: #eeeeee;
                    margin: 15px 0;
                }
                .copyright{
                    padding: 10px 20px;
                    margin-top: 30px;
                    color: #6e6e6e;
                    font-size: 16px;
                    line-height: 30px;
                    border: 1px solid #EEEEEE;
                }
                .share{
                    text-align: center;
                    &>div{
                        display: inline-block;
                        height: 40px;
                        border: 1px solid #E60012;
                        border-radius: 20px;
                        line-height: 38px;
                        padding: 0 20px;
                        margin-top: 30px;

                        &.weibo{
                            border-color: #E60012;
                            color: #E60012;
                        }
                        &.weixin{
                            border-color: #00972D;
                            color: #00972D;
                            margin-left: 30px;
                        }
                    }
                    img{
                        vertical-align: middle;
                    }
                }
                ul.tag-list{
                    font-size: 14px;
                    margin-top: 20px;
                    letter-spacing: 10px;
                    &>li{
                        display: inline-block;
                        height: 26px;
                        padding: 0 12px;
                        line-height: 26px;
                        border-radius: 13px;
                        background-color: #F0F0F0;
                        cursor: pointer;
                        letter-spacing: 0;
                        margin-top: 10px;
                        h3{
                            font-size: 14px;
                            font-weight: normal;
                            a{
                                color: #a8a8a8;
                            }
                        }
                    }
                }
                .special-ad{
                    font-size: 14px;
                    background-color: #F9F9F9;
                    border: 1px solid #DEDCDC;
                    color: #a8a8a8;
                    padding: 20px;
                    margin-top: 20px;
                    .clearfix;
                    p{
                        width: 400px;
                        .fl;
                        line-height: 30px;
                    }
                    img{
                        width: 114px;
                        height: 114px;
                        .fr;
                    }
                }
            }
        }
        #fragment-article-share-menu{
            width: 57px;
            .menu-list{
                &>li{
                    width: 100%;
                    height: 62px;
                    line-height: 60px;
                    text-align: center;
                    background-color: #fafafa;
                    cursor: pointer;
                    transition: .5s;
                    position: relative;
                    margin-left: 0;
                    .cover{
                        visibility: hidden;
                        width: 100%;
                        height: 40px;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        margin-top: -20px;
                        color: #ffffff;
                        line-height: 20px;
                    }
                    &:hover{
                        &.weibo{
                            background-color: #E71F19;
                        }
                        &.weixin{
                            background-color: #1EC354;
                        }
                        &.qzone{
                            background-color: #ffc136;
                        }
                        &.comment{
                            background-color: #e71f19;
                        }
                        &.collect{
                            background-color: #FF8C01;
                        }
                        &.like{
                            background-color: #e60012;
                        }
                        &.simple-view{
                            background-color: #3C75F6;
                        }
                        .cover{
                            visibility: visible;
                        }
                        .iconfont{
                            color: #ffffff;
                            &.icon-pinglun{
                                display: none;
                            }
                            &.icon-shoucang{
                                display: none;
                            }
                            &.icon-shoucang1{
                                display: none;
                            }
                            &.icon-wenben1{
                                display: none;
                            }
                        }
                    }
                    &+li{
                        border-top: 1px solid #f0f0f0;
                    }
                    &:nth-of-type(3n+4){
                        margin-top: 16px;
                        border-top: none;
                    }
                    &.collect.active{
                        .iconfont{
                            color: #FF8C01;
                        }
                    }
                    &.like.active{
                        .iconfont{
                            color: #e60012;
                        }
                    }
                    .iconfont{
                        font-size: 30px;
                        color: #989898;
                        transition: .5s;
                    }
                }
            }
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 页面头部与频道挂钩 -->
    ${header}
    <div id="time" style="display: none"></div>
    <div id="simple-view-close" title="退出沉浸阅读" onclick="closeSimpleView()">
        <i class="iconfont icon-guanbi"></i>
    </div>
    <div id="main">
        <div class="position">
            <a href="${channelUrl}" target="_blank" title="${channelName!}">${channelName!}</a> -
            <a href="${columnUrl}" target="_blank" title="${columnName!}">${columnName!}</a>
        </div>
        <div id="share-menu-wrap">
            <div id="fragment-article-share-menu" data-article-id="${id}">
                <ul class="menu-list">
                    <li class="weibo">
                        <i class="iconfont icon-weibo" onclick="utils.shareToWeibo()"></i>
                    </li>
                    <li class="weixin" onclick="utils.shareWeixin()">
                        <i class="iconfont icon-pengyouquan"></i>
                    </li>
                    <li class="qzone">
                        <i class="iconfont icon-kongjian" onclick="utils.shareToQzone()"></i>
                    </li>
                    <#if commentStatus == 1>
                        <li class="comment" onclick="scollToComment()">
                            <div class="cover">
                                评论 <br> <span>0</span>
                            </div>
                            <i class="iconfont icon-pinglun"></i>
                        </li>
                    </#if>
                    <li class="collect">
                        <div class="cover">
                            收藏 <br> <span>0</span>
                        </div>
                        <i class="iconfont icon-shoucang"></i>
                    </li>
                    <li class="like">
                        <div class="cover">
                            点赞 <br> <span>0</span>
                        </div>
                        <i class="iconfont icon-shoucang1"></i>
                    </li>
                    <li class="simple-view" onclick="simpleRead()">
                        <div class="cover">
                            沉浸 <br> 阅读
                        </div>
                        <i class="iconfont icon-wenben1"></i>
                    </li>
                </ul>
            </div>
        </div>
        <section id="main-content" data-article-id="${id}">
            <h1>${articleTitle}</h1>
            <div class="source">
                <span class="website">${articleSource}</span>
                <span class="author"><#if articleAuthorList??><#list articleAuthorList as articlePromoter>${articlePromoter.name} </#list></#if></span>
                <span class="date"><#if updateTime?exists>${updateTime?string('yyyy-MM-dd HH:mm:ss')}</#if></span>
            </div>
            <hr>
            <div class="content-wrap">
                <#if articleInfoStatus == 1>
                    <section class="abstract">
                        ${articleInfo}
                    </section>
                    <div class="hr"></div>
                </#if>
                <article class="content">${articleContent}</article>
                <!-- 附件 -->
                <#if adjunctList??>
                    <ul class="enclosure">
                        <#list adjunctList as adjunct>
                            <li data-url="${adjunct.adjunctUrl}" data-file-name="${adjunct.adjunctName}" title="${adjunct.adjunctName}">
                                <i class="iconfont icon-fujian1"></i>
                                <span>${adjunct.adjunctName}</span>
                            </li>
                        </#list>
                    </ul>
                </#if>
                ${copyright}
                <div class="share">
                    <div class="weibo" onclick="utils.shareLongWeibo('${articleShareImage}')">
                        <img src="/web/img/icon_weibo.png">
                        分享长微博
                    </div>
                    <div class="weixin" onclick="utils.shareWeixin()">
                        <img src="/web/img/icon_weixin.png">
                        分享到微信
                    </div>
                </div>
                <#if articleKeywordList??>
                    <!-- 关键词列表(可点击) -->
                    <ul class="tag-list">
                        <#list articleKeywordList as articleKeyword>
                            <li>
                                <h3>
                                    <a href="${"${domain}/web/tagList/1.html?tag=${articleKeyword.keyword}"}" target="_blank" class="tag" title="${articleKeyword.keyword}">${articleKeyword.keyword}</a>
                                </h3>
                            </li>
                        </#list>
                    </ul>
                </#if>
            </div>
        </section>
        ${hibuick}
        ${recommendArticle}
        <#if commentStatus == 1>
            <#include "/web/html/inc/comment.ftl">
        </#if>
        <aside class="right-area">
            <div class="control area-1">
                <#if articlePromoterStatus == 1>
                    <!--#include virtual="/web/html/fragment/promoter/${articleRecommendPromoter}.htm"-->
                </#if>
                ${hotSearch}
            </div>
            <div class="control area-2">
                ${hotSpecial}
                ${videoClassroom}
            </div>
            <div class="control area-3">
                ${excellentBooks}
                ${rightAd}
            </div>
        </aside>
    </div>
    ${footer}
</div>
</body>
</html>